<template>
	<view class="header">
		<!-- 列表 -->
		<view class="list flex" v-for="(item,index) in carlist" :key='item.id' @click="goPage(item.id,item)">
			<view class="img">
				<image :src="item.goodImg+'!idx'" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title">{{item.car_Type_Name}} {{item.configuration_Name}}</view>
				<view class="flex type">
					<view v-show="item.proprietary" class="proprietary">自营</view>
					<view v-show="item.down_Payment" class="rentOut">一成首付</view>
					<view v-show="item.rentOut" class="rentOut" style="background-color: #FFB763;">以租代售</view>
					<view v-show="item.loans" class="loans">巨能降</view>
				</view>
				<view v-if="!item.loans">
					<view class="guidancePrice">指导价：{{item.factory_Price}}</view>
					<view class="flex flex-jc-sb flex-ai-c price">
						<view>月供<text style="font-weight: bold;font-size: 28rpx;">{{item.monthlyPayments | million}}</text></view>
						<view>首付<text style="font-weight: bolder;">{{item.downPayment | million}}</text></view>
					</view>
				</view>
				<view v-else>
					<view class="guidancePrice">指导价：<text style="text-decoration: line-through;">{{item.factory_Price}}</text></view>
					<view class="flex flex-ai-c price">
						<view>裸车价</view>
						<view><text style="font-weight: bolder;margin-left: 10rpx;font-size: 28rpx;">{{item.client_Price}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			carlist: {
				type: Array,
				default: () => []
			}
		},
		data(){
			return {
				
			}
		},
		filters: {
			million(value) { //过万处理
				let num
				if (value > 9999) { //大于9999显示x.xx万
					num = ((value / 1000) / 10).toFixed(2) + '万'
				} else if (value <= 9999 && value >= -9999) {
					num = value + '元'
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = -((Math.abs(value) / 1000) / 10).toFixed(2) + '万'
				}
				return num
			}
		},
		watch:{
			carlist(val){
				// console.log(val,'监听')
			}
		},
		methods:{
			//跳转详情
			goPage(id,item) {
			  // console.log(id,item)
			  if(item.loans){
			    uni.navigateTo({
			      url: '/pages_commodity/giantnengjiangDetails/giantnengjiangDetails?goodid=' + id
			    })
			  }else {
			    uni.navigateTo({
			      url: '/pages_commodity/sourceDetails/sourceDetails?goodid=' + id
			    })
			  }
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		
		.list{
			width: 702rpx;
			margin: 0 auto;
			padding: 38rpx 0 20rpx 0;
			border-bottom: 2rpx solid #EEEEEE;
			
			.img{
				width: 40%;
				height: 136rpx;
				image{
					width: 232rpx;
					height: 136rpx;
					border-radius: 10rpx;
				}
			}
			
			.content{
				width: 60%;
				margin: 0 24rpx;
				
				.title{
					font-size: 28rpx;
					font-weight: 500;
					color: #343434;
				}
				
				.price{
					color: #FC4040;
					font-weight: 500;
					font-size: 20rpx;
				}
				
				//是否类型
				.type{
					margin: 10rpx 0;
					
					.proprietary{
						margin-right: 15rpx;
						width: 60rpx;
						height: 30rpx;
						color: #FFFFFF;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						background: #FF4B44;
						border-radius: 5rpx;
					}
					.rentOut{
						margin-right: 15rpx;
						width: 104rpx;
						height: 30rpx;
						color: #FFFFFF;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						background: #FFD053;
						border-radius: 5rpx;
				
					}
					.loans{
						width: 104rpx;
						height: 30rpx;
						color: #FFFFFF;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						background: #B5D55E;
						border-radius: 5rpx;
					}
				}
				
				// 指导价
				.guidancePrice{
					margin: 10rpx 0;
					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
				}
			}
			
		}
	}
</style>
